<template>
  <n-card title="数据管理">
    <n-space style="padding: 8px 0">
      <n-button @click="showModal=true">
        新建数据
      </n-button>
    </n-space>
    <n-data-table
        :columns="columns"
        :data="data"
        :bordered="false"

    />
    <n-pagination
        v-model:page="paginationReactive.page"
        v-model:page-size="paginationReactive.size"
        show-size-picker
        show-quick-jumper
        v-model:page-sizes="paginationReactive.pageSizes"
        @pageSizeChange="getData"
        :page-count="paginationReactive.total"/>
  </n-card>


  <n-modal v-model:show="showModal" @before-leave="closeModal">
    <n-card
        style="width: 600px"
        title="添加数据"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      <n-form
          ref="formRef"
          :label-width="80"
          label-placement="left"
          :model="formValue"
          :rules="rules"
      >
        <n-form-item label="姓名" path="name">
          <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
        </n-form-item>
        <n-form-item label="平台" path="platform">
          <n-input v-model:value="formValue.platform" placeholder="请输入平台"/>
        </n-form-item>
        <n-form-item label="链接" path="url">
          <n-input v-model:value="formValue.url" placeholder="请输入链接地址"/>
        </n-form-item>

        <div style="display: flex; justify-content: flex-end">
          <n-button round type="primary" @click="handleValidateClick">
            提交
          </n-button>
        </div>
      </n-form>
    </n-card>
  </n-modal>
</template>

<script setup>
import {h, defineComponent} from "vue";
import {NButton, NSpace} from "naive-ui";
import {requestCreateMedia, requestMediaListApi} from "../../api/media/mediaApi";

/**
 * 是否展示模态框
 * @type {Ref<UnwrapRef<boolean>>}
 */
const showModal = ref(false)

const closeModal = () => {
  //重置数据
  formValue.value = {}
  showModal.value = false
}
/**
 * 表单引用
 * @type {Ref<any>}
 */
const formRef = ref()

const formValue = ref({
  name: "",
  platform: "",
  url: ""
})
/**
 * 表格数据
 * @type {Ref<UnwrapRef<[{no: number, length: string, title: string},{no: number, length: string, title: string},{no: number, length: string, title: string}]>>}
 */
const data = ref([]);

const getData = () => {
  requestMediaListApi({
    page: paginationReactive.page,
    size: paginationReactive.size
  }).then(res => {
    data.value = res.data
  })
}

onMounted(() => {
  //初始化数据
  getData()
})

const createColumns = ({
  play
}) => {
  return [
    {
      title: "姓名",
      key: "name"
    },
    {
      title: "平台",
      key: "platform"
    },
    {
      title: "链接",
      key: "url"
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        return h(
            NSpace,
            {},
            {
              default: () => [h(NButton, {
                onClick: () => play(row),
                type: "error"
              }, {default: () => "删除"}),
                // h(NButton, {
                //   onClick: () => play(row)
                // }, {default: () => "Hello"})
              ]
            }
        );
      }
    }
  ];
};

const rules = {
  name: {
    required: true,
    message: "请输入姓名",
    trigger: ["input", "blur"]
  },
  platform: {
    required: true,
    message: "请输入平台",
    trigger: ["input", "blur"]
  },
  url: {
    required: true,
    message: "请输入地址",
    trigger: ["input", "blur"]
  }
}

const handleValidateClick = (e) => {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      //提交作品
      requestCreateMedia(formValue.value).then((res) => {
        window.$message.success("提交成功")
        closeModal()
        getData()
      })
    } else {
      // console.log(errors);
      window.$message.error("请先完成表单项");
    }
  });
}

const paginationReactive = reactive({
  page: 1,
  size: 10,
  total: 0,
  showSizePicker: true,
  pageSizes: [10, 20, 50],
  onChange: (page) => {
    paginationReactive.page = page;
  },
  onUpdatePageSize: (pageSize) => {
    paginationReactive.pageSize = pageSize;
    paginationReactive.page = 1;
  }
});
const columns = createColumns({
  play(row) {
    // window.$message.info(`Play ${row.title}`);

  }
})

</script>
